<template>
	<div id="bus_list">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select clearable v-model="params.levelId" placeholder="会员等级" @change="search">
					<el-option v-for="item in vipList" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.status" @change="search">
					<el-option value="1" label="正常"></el-option>
					<el-option value="-1" label="冻结"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="商家Id" v-model="params.id" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="手机号码" v-model="params.phone" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="上级Id" v-model="params.parent_id" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="商家信息" >
				<template slot-scope="scope">
					<p>商家ID：{{scope.row.id}}</p>
					<p>会员状态：<span v-for="item in vipList" v-if="scope.row.level_id==item.id">{{item.name}}</span></p>
					<p>邀请人数：{{scope.row.invite_count}}</p>
					<p>上级ID：{{scope.row.parent_id}}</p>
				</template>
			</el-table-column>
			<el-table-column label="联系信息" >
				<template slot-scope="scope">
					<p>手机：{{scope.row.phone}}</p>
					<p>qq：{{scope.row.qq}}</p>
					<p>微信：{{scope.row.wechat}}</p>
					<p>邮箱：{{scope.row.email}}</p>
				</template>
			</el-table-column>
			<el-table-column label="钱包信息" >
				<template slot-scope="scope">
					<p>钱包余额:{{scope.row.balance}}</p>
				</template>
			</el-table-column>
			<el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    {{$common.getDate(scope.row.create_time)}}
                </template>
            </el-table-column>
			<el-table-column label="操作" >
				<template slot-scope="scope">
					<el-button @click="freezeOrThaw(scope.row.id,-1)" v-if="scope.row.status == 1" size="small" type="warning">冻结</el-button>
					<el-button @click="freezeOrThaw(scope.row.id,1)" v-else size="small" type="primary">解冻</el-button>
					<el-button size="small" type="primary" @click="showDialog(scope.row)">更换会员等级</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>

		<el-dialog
			title="更换会员等级"
			:visible.sync="dialogVisible"
			width="300px"
			@close="closeDialog"
			>
			<el-select v-model="row.level_id">
				<el-option v-for="item in vipList" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updatelevel">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
					phone:'',
					status: '',
					levelId: '',
					id:'',
					parentId:'',
					tenantid:sessionStorage.getItem("tenantid")
				},
				row: {},
				list: [],
				selectData: [],
				vipList: [],
				timeArr: [],
				total: 0,
				loading: false,
				dialogVisible: false
			};
		},

		watch: {},

		created() {
			this.getList()
			this.getVip()
		},

		mounted() {
		},

		methods: {
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			updatelevel(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$request.post({
					url: '/ReportApi/tenant/userupdatelevel',
					params: {
						id:this.row.id,
						levelId:this.row.level_id
					},
					success: res => {
						this.$message.success('操作成功')
						this.dialogVisible = false
					},
					finally: () => {
						loading.close();
					}
				})
			},
			closeDialog(){
				this.row = {}
			},
			showDialog(row){
				this.row = row
				this.dialogVisible = true
			},
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			freezeOrThaw(id,status){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$request.post({
					url:'/ReportApi/tenant/userfreezeOrThaw',
					params:{
						id,
						status
					},
					success: res => {
						this.$message.success('操作成功')
						this.getList()
					},
					finally:res => {
						loading.close()
					}
				})
			},
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				this.getList();
			},
			getVip(){
				this.$request.post({
					url:'/ReportApi/tenant/vipalllist',
					params: {
						tenantid:sessionStorage.getItem("tenantid")
					},
					success: res => {
						this.vipList = res
					}
				})
			},
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/tenant/userlist',
					params: this.params,
					success: result =>{
						this.list = result[0] 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			}
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
#bus_list{
	.page{
		text-align: right;
		margin-top: 20px;
	}
}
</style>
